<template>
  <div class="global-container">
    <div class="global-header">
      <img
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/current.png')"
      />
      <div class="title">
        云原生
        <div class="title-content">
          提供云原生YAML文件的管理能力，支持云原生YAML导入、导出、编辑、部署等能力。
        </div>
      </div>
    </div>
    <div class="global-info">
      <div class="global-operate">
        <span class="keyword">关键词：</span>
        <el-input
          v-model="searchInput"
          placeholder="通过中文名、标识检索"
          clearable
          class="inputStyle"
          style="width: 20%"
          prefix-icon="el-icon-search"
          @input="filterAppInfoListByAppNameOrAppZhName"
        />
        <div class="right-menu">
          <el-button
            type="primary"
            class="el-button-primary-style"
            @click="openImportDialog"
          >
            导入
          </el-button>
        </div>
      </div>
    </div>

    <div class="servicePackageList">
      <div>
        <el-table
          ref="serviceList"
          :data="allCloudYamlList"
          style="width: 100%"
          :cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
          :header-cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
          height="63vh"
        >
          <el-table-column label="中文名称" width="200">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.yamlZhname"
                placement="bottom"
                popper-class="tooltipClass"
                :disabled="isShowTooltip"
              >
                <div class="descSpan" @mouseover="onMouseOver($event)">
                  {{ scope.row.yamlZhname }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="标识" width="200">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.yamlInterface"
                placement="bottom"
                popper-class="tooltipClass"
                :disabled="isShowTooltip"
              >
                <div class="descSpan" @mouseover="onMouseOver($event)">
                  {{ scope.row.yamlInterface }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="版本" width="200">
            <template slot-scope="scope">
              <div class="descSpan">
                {{ scope.row.yamlVersion }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="描述">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.yamlDescription"
                placement="bottom"
                popper-class="tooltipClass"
                :disabled="isShowTooltip"
              >
                <div class="descSpan" @mouseover="onMouseOver($event)">
                  {{ scope.row.yamlDescription }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="镜像" width="300">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.yamlImages"
                placement="bottom"
                popper-class="tooltipClass"
                :disabled="isShowTooltip"
              >
                <div class="descSpan" @mouseover="onMouseOver($event)">
                  {{ scope.row.yamlImages }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="padding: 0"
                @click="editCloudNative(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                style="padding: 0"
                @click="deployCloudNative(scope.row)"
              >
                部署
              </el-button>
              <el-button
                type="text"
                style="margin-right: 10px; padding: 0"
                @click="download(scope.row.id)"
              >
                下载
              </el-button>
              <el-popconfirm
                title="确认删除云原生数据信息？"
                @confirm="deleteCloudNative(scope.row.id)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  style="color: #f56c6c; padding: 0"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px; float: right">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="page.total"
          :page-size="page.pageSize"
          :page.sync="page"
          @current-change="changePage"
        />
      </div>
    </div>
    <div v-if="showImportDialog">
      <import-cloud-yaml
        ref="importCloudYamlRef"
        :tmpGvCloudYamlInfo="gvCloudYamlInfo"
      ></import-cloud-yaml>
    </div>
    <div v-if="showDeployDialog">
      <deploy-cloud-yaml
        ref="deployCloudYamlRef"
        :tmpGvCloudYamlInfo="gvCloudYamlInfo"
      ></deploy-cloud-yaml>
    </div>
  </div>
</template>

<script>
  import ImportCloudYaml from "@/views/appstore/cloudComponents/ImportCloudYaml.vue";
  import DeployCloudYaml from "@/views/appstore/cloudComponents/DeployCloudYaml.vue";
  // import {getId, getToken} from "@/utils/auth";

  export default {
    name: "CloudNative",
    components: {ImportCloudYaml, DeployCloudYaml},
    data() {
      return {
        searchInput: "",
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        tmpPage: {
          pageSize: 10,
          pageNum: 1,
          filterKey: "",
        },
        isShowTooltip: false,
        allCloudYamlList: [],
        showImportDialog: false,
        showDeployDialog: false,
        gvCloudYamlInfo: {
          yamlZhname: "",
          yamlName: "",
          yamlVersion: "",
          yamlInterface: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
          newVersion: "",
        },
      };
    },
    methods: {
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      getAllCloudYamlList() {
        this.$appStoreApi.pageListYaml(this.tmpPage).then((res) => {
          if (res && res.code === 200) {
            this.allCloudYamlList = res.data.records;
            this.page.total = res.data.total;
          }
        });
      },
      openImportDialog() {
        this.showImportDialog = true;
        this.$nextTick(() => {
          if (this.$refs.importCloudYamlRef !== undefined) {
            this.$refs.importCloudYamlRef.showImportDialog = true;
            this.$refs.importCloudYamlRef.$on("closeDialog", this.closeDialog);
            this.$refs.importCloudYamlRef.$on("initList", this.initList);
          }
        });
      },
      closeDialog() {
        this.showImportDialog = false;
        this.gvCloudYamlInfo = {
          yamlZhname: "",
          yamlName: "",
          yamlVersion: "",
          yamlInterface: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
          newVersion: "",
        };
        this.$refs.importCloudYamlRef.$off("closeDialog");
      },
      editCloudNative(row) {
        this.gvCloudYamlInfo = row;
        this.openImportDialog();
      },
      deployCloudNative(row) {
        this.gvCloudYamlInfo = row;
        this.openDeployDialog();
      },
      openDeployDialog() {
        this.showDeployDialog = true;
        this.$nextTick(() => {
          if (this.$refs.deployCloudYamlRef !== undefined) {
            this.$refs.deployCloudYamlRef.showDeployDialog = true;
            this.$refs.deployCloudYamlRef.$on(
              "closeDeployDialog",
              this.closeDeployDialog
            );
          }
        });
      },
      closeDeployDialog() {
        this.showDeployDialog = false;
        this.gvCloudYamlInfo = {
          yamlZhname: "",
          yamlName: "",
          yamlVersion: "",
          yamlInterface: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
          newVersion: "",
        };
        this.$refs.deployCloudYamlRef.$off("closeDeployDialog");
      },
      changePage(currentPage) {
        this.page.currentPage = currentPage;
        this.tmpPage.pageNum = currentPage;
        this.getAllCloudYamlList();
      },
      initList() {
        this.getAllCloudYamlList();
        this.$refs.importCloudYamlRef.$off("initList");
      },
      download(id) {
        window.open(`/appstore/cloudYaml/download/?id=${id}`);
        // this.windowOpen(`/appstore/cloudYaml/download/?id=${id}`, 'serverother.xls')
      },
      //
      // windowOpen(url, fileName) {
      //   const tokenStr = getToken()
      //   const idStr = getId()
      //   const xhr = new XMLHttpRequest();
      //   // var fileName = window.fileName + typeName; // 文件名称
      //   xhr.open('GET', url, true);
      //   xhr.responseType = 'blob';
      //   xhr.setRequestHeader('X-Token', tokenStr);
      //   xhr.setRequestHeader('X-ToTenant-Id', idStr);
      //   xhr.onload = function (res) {
      //     if (this.status === 200) {
      //       const type = xhr.getResponseHeader('Content-Type');
      //       const blob = new Blob([this.response], {type: type});
      //       if (typeof window.navigator.msSaveBlob !== 'undefined') {
      //         /*
      //          * For IE
      //          * >=IE10
      //          */
      //         window.navigator.msSaveBlob(blob, fileName);
      //       } else {
      //         /*
      //          * For Non-IE (chrome, firefox)
      //          */
      //         const URL = window.URL || window.webkitURL;
      //         const objectUrl = URL.createObjectURL(blob);
      //         if (fileName) {
      //           var a = document.createElement('a');
      //           if (typeof a.download === 'undefined') {
      //             window.location = objectUrl;
      //           } else {
      //             a.href = objectUrl;
      //             a.download = fileName;
      //             document.body.appendChild(a);
      //             a.click();
      //             a.remove();
      //           }
      //         } else {
      //           window.location = objectUrl;
      //         }
      //       }
      //     }
      //   }
      //   xhr.send();
      // },
      deleteCloudNative(id) {
        this.$appStoreApi.deleteYaml([id]).then((res) => {
          if (res && res.code === 200) {
            this.getAllCloudYamlList();
          }
        });
      },
      filterAppInfoListByAppNameOrAppZhName() {
        this.tmpPage.filterKey = this.searchInput;
        this.tmpPage.pageNum = 1;
        this.tmpPage.pageSize = 10;
        this.getAllCloudYamlList();
      },
    },
    beforeMount() {
      this.getAllCloudYamlList();
    },
  };
</script>

<style scoped>
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #304156;
  }
</style>
